#{extends 'main.html' /}
#{set title:'Give2Get - Service Detail' /}


<div id="service_detail">

    <p id="title_service_detail">${service.title}</p>


    <!-- Service Detail -->
    <div id="detail">

        <table width="100%" id="details">
            <tr>

                <!-- First Set of Data -->
                <td>
                    <table width="100%">
                        <tr class="odd">
                            <td>Title</td>
                            <td>${service.title}</td>
                        </tr>
                        <tr class="even">
                            <td>Description</td>
                            <td>${service.description}</td>
                        </tr>
                        <tr class="odd">
                            <td>Created at</td>
                            <td>${service.created}</td>
                        </tr>
                        <tr class="even">
                            <td>Status</td>
                            <td>${service.status}</td>
                        </tr>
                        <tr class="odd">
                            <td>View Count</td>
                            <td>${service.viewCount}</td>
                        </tr>
                        <tr class="even">
                            <td>Provider</td>
                            <td><a href="/user/${service.providerId}">${service.providerFullName}</a></td>
                        </tr>
                    </table>

                </td>

                <!-- Second Set of Data -->
                <td>
                    <table width="100%">
                        <tr class="odd">
                            <td>Start Date</td>
                            <td>${service.startDate}</td>
                        </tr>
                        <tr class="even">
                            <td>End Date</td>
                            <td>${service.endDate}</td>
                        </tr>
                        <tr class="odd">
                            <td>Location</td>
                            <td>${service.location}</td>
                        </tr>
                        <tr class="even">
                            <td>Duration</td>
                            <td>${service.duration}</td>
                        </tr>
                        <tr class="odd">
                            <td>Period</td>
                            <td>${service.period}</td>
                        </tr>
                        <tr class="even">
                            <td></td>
                            <td>
                                <input type="submit" value="Request"/>
                            </td>

                        </tr>
                    </table>
                </td>

            </tr>

        </table>

    </div>



    <!-- New Post -->
    <div id="post_comment">

        <!-- Title & Add Comment-->
        <table width=100% id="table_comments_header">
            <tr>
                <td>
                    <p id="title_service_comments">${comments.size() > 1 ? comments.size() + ' ' : ''}Comments</p>
                </td>
                <td style="text-align:right;">
                    #{form @newComment(service?.id, service?.title)}
                    <input type="submit" value="Add Comment" />
                    #{/form}
                </td>
            </tr>
        </table>


        #{if comments}
        <!-- Comment List -->
        <table width="100%">
            #{list comments, as:'comment'}
            <tr class="${comment.oddOrEven}">
                <td>
                    <table width="100%">
                        <tr>
                            <td width="80%" class="comment_text">${comment.text}</td>
                        </tr>
                        <tr>
                            <td class="comment_date">${comment.created}</td>
                            <td class="comment_owner"><a href="/user/${comment.ownerId}">${comment.ownerFullName}</a></td>
                        </tr>
                    </table>
                </td>                               
            </tr>
            #{/list}

        </table>
        #{/if}
        #{ifnot comments}
        <p align="center">No Comments</p>
        #{/ifnot}

    </div>



    <!-- Latest 50 comments -->
    <div id="comments">

    </div>


</div>